import React, { Component } from "react";

import {
  View,
  Button,
  Slider,
  Text,
  Image,
  ScrollView,
  ListView,
  StyleSheet,
  TouchableHighlight,
  RefreshControl
} from "react-native";

import ClSlider from "./../components/clslider";

import { getStoriesLatest } from "../controllers/zhihuGetStories.js";

export default class HomeScreen extends Component {

  static navigationOptions = {

    title: "首页（仿知乎日报）",
    headerStyle: {
      "backgroundColor": "#00A2ED",
    },
    headerTitleStyle: {
      "color": "#fff"
    }
  };

  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    
    this.state = {
      top_stories: [],
      stories: [],
      date: "",
      ds,
      refreshing: false
    }

    this.onPress = this.onPress.bind(this);
  }

  onPress(index) {

    const { navigate } = this.props.navigation;
    const story = this.state.top_stories[index];

    navigate("Article", { id: story.id });
  }

  renderRow(rowData) {

    return (

      <TouchableHighlight onPress = { () => { this.onListViewPress(rowData); } }>
        <View style = { styles.listViewRow }>
          <Text
            numberOfLines = { 3 }
            style = { styles.listViewTitle }
          >{ rowData.title }</Text>
          <Image 
            source = {{ uri: rowData.images[0] }}
            style = {{ width: 50, height: 50 }}
          />
        </View>
      </TouchableHighlight>
    );
  }

  onListViewPress(rowData) {
    const { navigate } = this.props.navigation;
    navigate("Article", { id: rowData.id });
  }

  onRefresh() {
    this.setState({ refreshing: true });

    // 获取内容
    getStoriesLatest().then( responseJson => {

      this.setState({
        refreshing: false,
        ...responseJson
      });
    })
  }

  render() {

    const { top_stories, stories } = this.state;

    return (

      <ScrollView
        showsVerticalScrollIndicator = { false }
        refreshControl = {
          <RefreshControl 
            refreshing = { this.state.refreshing }
            onRefresh = { this.onRefresh.bind(this) }
          />
        }
      >
        <ClSlider
          images = { top_stories } 
          onPress = { this.onPress.bind(this) }
        />
        <View
          style = { styles.container }
        >
          <Text style = { styles.title }>今日热闻</Text>
        </View>
        <ListView 
          style = { styles.container }
          enableEmptySections = { true }
          dataSource = { this.state.ds.cloneWithRows(this.state.stories || []) }
          renderRow = { this.renderRow.bind(this) }
        />
      </ScrollView>
    );
  }

  // 组件挂载上去
  componentDidMount() {
    
    this.onRefresh.apply(this);
  }
}

const styles = StyleSheet.create({
  "container": {
    "padding": 10
  },
  "title": {
    fontSize: 14,
    fontWeight: "bold"
  },
  "listViewRow": {
    flex: 1,
    flexDirection: "row",
    marginBottom: 15,
    backgroundColor: "#fff",
    padding: 10,
    borderRadius: 2,
    alignItems: "center"
  },
  "listViewTitle": {
    flex: 1,
    lineHeight: 30,
    padding: 3,
    fontSize: 18
  }
})